<template>
  <el-date-picker
    v-model="innerValue"
    type="daterange"
    align="right"
    unlink-panels
    range-separator="-"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
    :picker-options="pickerOptions"
    @change="handleChange"
    size="mini"
  >
  </el-date-picker>
</template>
<script>
import moment from "moment";
export default {
  props: {
    value: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    const defaultRange = this.getDefaultRange();
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      innerValue: this.value,
    };
  },
  watch: {
    value(newVal) {
      this.innerValue = newVal;
    },
  },
  methods: {
    getDefaultRange() {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 30 * 24 * 60 * 60 * 1000);
      return [start, end];
    },
    handleChange(val) {
      //   this.$emit('input', val)
      let m1 = moment(this.innerValue[0]).format("YYYY-MM-DD");
      let m2 = moment(this.innerValue[1]).format("YYYY-MM-DD");
      this.$emit("OptionsRange", m1, m2);
    },
    // formatDates(range) {
    //   return range.map((date) => moment(date).format("YYYY-MM-DD"));
    // },
  },
};
</script>